<template>
  <vxe-form
    ref="form"
    class="form"
    :data="value"
    :rules="rules"
    title-align="right"
    title-width="100"
    title-overflow
    span="6"
  >
    <vxe-form-item title="人员编码" field="employeeCode" :item-render="{}">
      <template #default="{ data }">
        <vxe-input v-model="data.employeeCode" disabled placeholder="人员编码" clearable></vxe-input>
      </template>
    </vxe-form-item>
    <vxe-form-item title="姓名" field="employeeName" :item-render="{}">
      <template #default="{ data }">
        <vxe-input v-model="data.employeeName" :disabled="!isEdit" placeholder="姓名" clearable></vxe-input>
      </template>
    </vxe-form-item>
    <vxe-form-item title="性别" field="gender" :item-render="{}">
      <template #default="{ data }">
        <vxe-select v-model="data.gender" :disabled="!isEdit" placeholder="性别" clearable>
          <vxe-option value="男" label="男"></vxe-option>
          <vxe-option value="女" label="女"></vxe-option>
        </vxe-select>
      </template>
    </vxe-form-item>
    <vxe-form-item title="年龄" field="age" :item-render="{}">
      <template #default="{ data }">
        <vxe-input v-model="data.age" disabled placeholder="年龄" clearable></vxe-input>
      </template>
    </vxe-form-item>
    <vxe-form-item title="手机号" field="phoneNumber" :item-render="{}">
      <template #default="{ data }">
        <vxe-input v-model="data.phoneNumber" :disabled="!isEdit" placeholder="手机号" clearable></vxe-input>
      </template>
    </vxe-form-item>
    <vxe-form-item title="出生日期" field="birthdate" :item-render="{}">
      <template #default="{ data }">
        <vxe-input
          v-model="data.birthdate"
          placeholder="日期"
          class="date"
          type="date"
          valueFormat="yyyy-MM-dd"
          :disabled="!isEdit"
          clearable
        ></vxe-input>
      </template>
    </vxe-form-item>
    <vxe-form-item title="籍贯" field="origin" :item-render="{}">
      <template #default="{ data }">
        <vxe-input v-model="data.origin" :disabled="!isEdit" placeholder="籍贯" clearable></vxe-input>
      </template>
    </vxe-form-item>
    <vxe-form-item title="政治面貌" field="politicsStatus" :item-render="{}">
      <template #default="{ data }">
        <vxe-select v-model="data.politicsStatus" :disabled="!isEdit" placeholder="政治面貌" clearable>
          <vxe-option
            v-for="item in politicsList"
            :key="item.id"
            :value="item.politicsStatu"
            :label="item.politicsStatu"
          ></vxe-option>
        </vxe-select>
      </template>
    </vxe-form-item>
    <vxe-form-item title="用工性质" field="natureEmployment" :item-render="{}">
      <template #default="{ data }">
        <vxe-input v-model="data.natureEmployment" :disabled="!isEdit" placeholder="用工性质" clearable></vxe-input>
      </template>
    </vxe-form-item>
    <vxe-form-item title="公司" field="company" :item-render="{}">
      <template #default="{ data }">
        <vxe-input v-model="data.company" :disabled="!isEdit" placeholder="公司" clearable></vxe-input>
      </template>
    </vxe-form-item>
    <vxe-form-item title="岗位" field="post" :item-render="{}">
      <template #default="{ data }">
        <vxe-select v-model="data.post" :disabled="!isEdit" placeholder="岗位" clearable>
          <vxe-option
            v-for="item in postList"
            :key="item.id"
            :value="item.projectPost"
            :label="item.projectPost"
          ></vxe-option>
        </vxe-select>
      </template>
    </vxe-form-item>
    <vxe-form-item title="个人职级" field="individualRank" :item-render="{}">
      <template #default="{ data }">
        <vxe-input v-model="data.individualRank" :disabled="!isEdit" placeholder="个人职级" clearable></vxe-input>
      </template>
    </vxe-form-item>
    <vxe-form-item title="所属类别" field="category" :item-render="{}">
      <template #default="{ data }">
        <vxe-input v-model="data.category" disabled placeholder="所属类别" clearable></vxe-input>
      </template>
    </vxe-form-item>
    <vxe-form-item title="身份证号" field="idCard" :item-render="{}">
      <template #default="{ data }">
        <vxe-input v-model="data.idCard" :disabled="!isEdit" placeholder="身份证号" clearable></vxe-input>
      </template>
    </vxe-form-item>
    <vxe-form-item title="持证情况" field="license" :item-render="{}">
      <template #default="{ data }">
        <vxe-input v-model="data.license" :disabled="!isEdit" placeholder="持证情况" clearable></vxe-input>
      </template>
    </vxe-form-item>
    <vxe-form-item title="获奖情况" field="awards" span="24" align="top" :item-render="{}">
      <template #default="{ data }">
        <vxe-textarea
          v-model="data.awards"
          :autosize="{ minRows: 5, maxRows: 8 }"
          placeholder="获奖情况"
          :disabled="!isEdit"
          clearable
        ></vxe-textarea>
      </template>
    </vxe-form-item>
  </vxe-form>
</template>
<script>
export default {
  props: {
    isEdit: {
      type: Boolean,
      default: false,
    },
    value: {
      type: Object,
      default: () => {},
    },
    postList: {
      type: Array,
      default: () => [],
    },
    politicsList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      rules: {
        idCard: [
          { required: true, message: '请输入身份证' },
          {
            validator({ itemValue }) {
              const sfzReg =
                /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
              // 自定义校验
              if (!sfzReg.test(itemValue)) {
                return new Error('身份证不符合标准');
              }
            },
          },
        ],
      },
    };
  },
  watch: {
    'value.birthdate'(value) {
      this.value.age = value ? this.getAge(value) : '';
    },
  },
  methods: {
    getAge(val) {
      let currentYear = new Date().getFullYear(); //当前的年份
      let calculationYear = new Date(val).getFullYear(); //计算的年份
      const wholeTime = currentYear + val.substring(4); //周岁时间
      const calculationAge = currentYear - calculationYear; //按照年份计算的年龄
      //判断是否过了生日
      if (new Date().getTime() > new Date(wholeTime).getTime()) {
        return calculationAge;
      } else {
        return calculationAge - 1;
      }
    },
  },
};
</script>
